import React from 'react'
import '@/assets/css/confirm.scoped.css'

const Component = () => 
{
    let rid = React.params('rid')?? 0
    //房间信息
    let [room, SetRoom] = useState<object | any>({
        flag_text: [],
        price: 0,
    })
    //日期显示
    let [DateShow, SetDateShow] = React.useState(false)


    //订单信息
    let [order, SetOrder] = React.useState({
        roomid: rid,
        busid: React.business.id,
        remark: '',
        //价格信息
        origin_price: room.price,
        price: '',
        //优惠券
        couponid:'',
        couponstr: '',
        //日期
        datestr: '',
        starttime: 0,
        endtime: 0,
        //住客
        gueststr: '',
        guestids: [] as any[],
        //支付方式
        paystr: '余额支付',
        pay: 'money'
    })

    React.useEffect(() => {
        RoomInfo()
    }, [])

    //房间信息
    const RoomInfo = async () => 
    {
        var result = await React.request.post('room/info', {
            rid: rid,
        })

        if(result.code == 0)
        {
            React.toast(result.msg, null, 'fail')
            return false
        }
        console.log(result)
        SetRoom(result.data.RoomInfo)
    }

    //修改日期
    const DateConfirm = (value:any) =>
    {
        SetDateShow(false)

        // var datestr = `2024-03-20 - 2024-03-25` 转换标准时间
        const options:any = {month: 'long', day: 'numeric'}
        var datestr = `${new Date(val[0]).toLocaleDateString('zh-cn', options)} - ${new Date(val[1]).toLocaleDateString('zh-cn', options)}`

        //获取到开始时间和结束时间
        //标准时间转换为时间戳
        var starttime = Date.parse(new Date(val[0]).toLocaleDateString())/1000
        var endtime = Date.parse(new Date(val[1]).toLocaleDateString())/1000
        
        SetOrder({
            ...order,
            starttime,
            endtime,
            datestr
        })
    }
    return (
        <>
            <div className="top"><div>立即预定</div></div>
            
            <div className='skeleton'>
                {/* 房间信息 */}
                <div className="detail">
                    <div className="thumb">
                        <img src={room.thumb_text} alt="" />
                    </div>
                    <div className="right">
                        <p>{room.name}</p>
                        <p>￥{room.price} / 晚</p>
                        <div className="tips">
                            {room.flag_text && room.flag_text.map((flag:any, index:any) => <span key={index}> {flag} </span>)}
                        </div>
                    </div>
                </div>

                {/* 表单信息 */}
                <div className='skeleton_rect'>
                    <label>入住日期</label>

                    <React.UI.Input type="text" className="date" placeholder="请选择入住日期" value={order.datestr} onClick={() => SetDateShow(true)} />

                    {/* 日期选择 */}
                    <React.UI.CalendarPicker
                        visible={DateShow}
                        min={new Date()}
                        selectionMode='range'
                        onClose={() => SetDateShow(false)}
                        onMaskClick={() => SetDateShow(false)}
                        onConfirm={DateConfirm}
                    />
                </div>
                </div>
            </div>    
        </>
    )
}

export default Component